<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8"/>
        <title>plugins</title>
    </head>

    <body>
        <div th:include="top :: html"></div>
        <div class="contentDiv">

            <table class="table table-hover table-condensed">
                <legend>
                    <strong><a th:if="${serviceName}" th:text="@{'/' + ${serviceName} + '/'}" th:href="@{/kong/plugins(service=${serviceName})}"/><a th:if="${routeInfo}" th:text="@{${routeInfo} + '/'}"></a>plugins</strong>
                </legend>
                <thead>
                    <tr>
                        <th>name</th>
                        <th>service.id</th>
                        <th>route.id</th>
                        <th>consumer</th>
                        <th>enabled</th>
                        <th>config.claims_to_verify</th>
                        <th>created_at</th>
                        <th>operate</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="plugin : ${plugins}">
                        <th scope="row" th:text="${plugin.name}"></th>
                        <td>
                            <a class="service_id" th:if="${plugin.service}" th:href="@{/kong/plugins(service=${plugin.service.id})}" th:service_id="${plugin.service.id}"></a>
                        </td>
                        <td>
                            <a class="route_id" th:if="${plugin.route}" th:href="@{/kong/plugins(route_id=${plugin.route.id})}" th:route_id="${plugin.route.id}"></a>
                            <br>
                            <span th:if="${plugin.route}" th:id="${plugin.route.id}"></span>
                        </td>
                        <td th:text="${consumerNameMap[plugin.consumer.id]}" th:if="${plugin.consumer}"></td>
                        <td th:text="null" th:if="${null ==  plugin.consumer}"></td>
                        <td th:text="${plugin.enabled}"></td>
                        <td th:text="${plugin.config.claims_to_verify}"></td>
                        <td th:text="${#dates.format(plugin.created_at * 1000, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <a class="btn btn-primary" th:href="@{'/kong/plugins/' + ${plugin.id}}">update</a>
                            <a class="btn btn-danger btn-delete" href="javascript:void(0)" th:value="${plugin.id}">delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div><a class="btn btn-primary" th:if="${route_id}" th:href="@{/kong/plugins/add(route_id=${route_id})}" role="button">add plugin</a></div>
            <div><a class="btn btn-primary" th:if="${service_id}" th:href="@{/kong/plugins/add(service_id=${service_id})}" role="button">add plugin</a></div>
            <div><a class="btn btn-primary" th:if="${#strings.isEmpty(service_id) and #strings.isEmpty(route_id)}" th:href="@{/kong/plugins/add}" role="button">add plugin</a></div>
        </div>
    <script type="application/javascript">
        $(function(){

            $('.btn-delete').click(function(){
                if(!confirm("Make sure to delete this?")){
                    return;
                }
                var plugin_id = $(this).attr('value');
                var url = "/kong/plugins/"+plugin_id + "/del";
                $.ajax({
                    url: url,
                    async: false,
                    type: "delete",
                    success: function(){
                        window.location.reload();
                    },
                    error: function(e){
                        alert(e.message);
                        window.location.reload();
                    }
                })
            });

            var all_services = $.ajax({url:"/kong/all_services", async:false});
            var all_service_json = all_services.responseText;
            var all_service_obj = eval('(' + all_service_json + ')');
            var service_map = {};
            for(var i=0; i<all_service_obj.length;i++){
                service_map[all_service_obj[i].id] = all_service_obj[i].name;
            }

            var all_routes = $.ajax({url:"/kong/all_routes", async:false});
            var all_route_json = all_routes.responseText;
            var all_route_obj = eval('(' + all_route_json + ')');
            var route_map = {};
            for(var i=0; i<all_route_obj.length;i++){
                var service_name = service_map[all_route_obj[i].service.id];
                route_map[all_route_obj[i].id] = service_name + ":" + all_route_obj[i].paths;
            }

            $('.route_id').each(function(){//replace route_id to serviceName
                var this_route_id = $(this).attr("route_id");
                if(this_route_id != '' && null != this_route_id){
                    // var serviceResponse = $.ajax({url:"/kong/routes/"+this_route_id+"/service/obj", async:false});
                    // var serviceJson = serviceResponse.responseText;
                    // var serviceObj = eval('(' + serviceJson + ')');
                    // var routeResponse = $.ajax({url: "/kong/routes/" + this_route_id + "/obj", async: false});
                    // var routeJson = routeResponse.responseText;
                    // var routeObj = eval('(' + routeJson + ')');
                    // $(this).text(serviceObj.name + ":" + routeObj.paths);
                    $(this).text(route_map[this_route_id]);
                }
            })
            $('.service_id').each(function(){//replace service_id to serviceName
                var this_service_id = $(this).attr("service_id");
                if(this_service_id != '' && null != this_service_id){
                    // var serviceResponse = $.ajax({url:"/kong/services/"+this_service_id+"/obj",async:false});
                    // var serviceJson = serviceResponse.responseText;
                    // var serviceObj = eval('(' + serviceJson + ')');
                    // $(this).text(serviceObj.name);
                    $(this).text(service_map[this_service_id]);
                }
            })

        })
    </script>
    </body>
</html>